<template>
  <div>
    <PageWrapper :contentFullHeight="true" :contentBackground="true">
      <Tabs v-model:activeKey="activeKey" @change="handleChange">
        <TabPane key="1" :tab="t('routes.demo.partSetting.partCategory')">
          <BasicTable @register="registerTable">
            <template #toolbar>
              <a-button
                v-auth="['system:part:category:create']"
                type="primary"
                @click="handleCreate"
              >
                {{ t('common.create') }}
              </a-button>
            </template>
            <!-- 默认分类 -->
            <template #defaultag="{ text: defaultag }">
              {{ defaultag === '1' ? t('common.yes') : t('common.no') }}
            </template>
            <template #action="{ record }">
              <TableAction
                :actions="[
                  {
                    icon: 'clarity:note-edit-line',
                    onClick: handleEdit.bind(null, record),
                    auth: 'system:part:category:update',
                  },
                  {
                    icon: 'ant-design:delete-outlined',
                    color: 'error',
                    popConfirm: {
                      title: t('common.confirmDelete'),
                      confirm: handleDelete.bind(null, record),
                    },
                    auth: 'system:part:category:delete',
                  },
                ]"
                :dropDownActions="[
                  {
                    label: t('routes.demo.partSetting.CategoryProperty'),
                    onClick: handleCategoryProp.bind(null, record),
                    auth: 'system:part:category:attribute',
                  },
                  {
                    label: t('routes.demo.partSetting.bindType'),
                    onClick: handlebindType.bind(null, record),
                    auth: 'system:part:category:type',
                  },
                ]"
              />
            </template>
          </BasicTable>
        </TabPane>
        <TabPane key="2" :tab="t('routes.demo.partSetting.setConfig')">
          <Row>
            <Col :span="8" />
            <Col :span="8">
              <BasicForm @register="registerForm" />
            </Col>
            <Col :span="8" />
            <Col :span="8" />
            <Col :span="8" style="display: flex; justify-content: flex-end; margin-left: -3rem">
              <a-button
                v-auth="['system:part:category:config']"
                type="primary"
                @click="CreatePartSetting"
                >{{ t('routes.demo.partSetting.application') }}</a-button
              >
            </Col>
            <Col :span="8" /> </Row
        ></TabPane>
        <TabPane key="3" :tab="t('routes.demo.partSetting.classProperty')">
          <BasicTable @register="registerTable2">
            <template #toolbar>
              <a-button
                v-auth="['system:part:attribute:create']"
                type="primary"
                @click="handleClassCreate"
              >
                {{ t('common.create') }}
              </a-button>
            </template>
            <!-- 控件 -->
            <template #attr="{ text: attr }">
              {{ proxy.$filters.filterFormControlType(attr) }}
            </template>
            <!-- 是否允许为空 -->
            <template #pdmnull="{ text: pdmnull }">
              {{ pdmnull === '1' || pdmnull === true ? t('common.yes') : t('common.no') }}
            </template>
            <!-- 是否为敏感属性 -->
            <template #isOnly="{ text: isOnly }">
              {{ isOnly === '1' || isOnly === true ? t('common.yes') : t('common.no') }}
            </template>
            <template #action="{ record }">
              <TableAction
                :actions="[
                  {
                    icon: 'clarity:note-edit-line',
                    onClick: handleClassEdit.bind(null, record),
                    auth: 'system:part:attribute:update',
                  },
                  {
                    icon: 'ant-design:delete-outlined',
                    color: 'error',
                    popConfirm: {
                      title: t('common.confirmDelete'),
                      confirm: handleClassDelete.bind(null, record),
                    },
                    auth: 'system:part:attribute:delete',
                  },
                ]"
              />
            </template>
          </BasicTable>
        </TabPane>
      </Tabs>
      <!-- 类属性弹窗 -->
      <PartClassPropModal @register="registerClassPropertyModal" @success="reload2" />
      <!-- 零件分类弹窗 -->
      <PartCategoryModal @register="registerPartCategoryModal" @success="reload1" />
      <!-- 零件分类属性弹窗 -->
      <PartTypePropModal @register="registerPartCategoryPropModal" />
      <!-- 绑定类型弹窗 -->
      <BindTypeModal @register="registerBindTypeModal" />
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
  import { ref, getCurrentInstance } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { PageWrapper } from '/@/components/Page';
  import { Tabs, TabPane, Row, Col } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getPartSettingColumns, getSetConfig, getClassColumns } from './data';
  import {
    getAllPartClass,
    getPartFeature,
    getPartFeatureList,
    deletePartFeatureList,
    updatePartFeature,
    deletePartClass,
  } from '/@/api/demo/system';

  import PartClassPropModal from './partClassPropModal.vue';
  import PartCategoryModal from './partCategoryModal.vue';
  import PartTypePropModal from './PartTypePropModal.vue';
  import BindTypeModal from './BindTypeModal.vue';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const { proxy }: any = getCurrentInstance();
  // tabs激活
  const activeKey = ref('1');

  // 获取零件特征项设置
  const getPartFeatureSetting = async () => {
    const res = await getPartFeature();
    setFieldsValue(res);
  };

  // 切换tabs
  const handleChange = (key: string) => {
    if (key === '2') {
      getPartFeatureSetting();
    }
  };

  // 零件特征项设置新增
  const CreatePartSetting = () => {
    updatePartFeature(getFieldsValue().firstFeature, getFieldsValue().secondFeature).then((res) => {
      if (res) {
        createMessage.success(t('common.saveSuccess'));
        getPartFeatureSetting();
      }
    });
  };

  // 零件分类新增
  const handleCreate = () => {
    openModalPartCategoryModal(true, {
      isUpdate: false,
      newIndex:
        getDataSource1() === undefined
          ? 0
          : Number(getDataSource1()[getDataSource1().length - 1].verdictpriority) + 1,
    });
  };

  // 零件分类修改
  const handleEdit = (record: Recordable) => {
    openModalPartCategoryModal(true, {
      isUpdate: true,
      record: record,
    });
  };

  // 零件分类删除
  const handleDelete = (record: Recordable) => {
    deletePartClass(record.partid).then((res) => {
      if (res) {
        createMessage.success(t('common.delSuccessText'));
        reload1();
      }
    });
  };

  // 类属性新增
  const handleClassCreate = () => {
    openModalClassPropertyModal(true, {
      isUpdate: false,
      docTypeId: 'PartRevision',
      newIndex: Number(getDataSource2()[getDataSource2().length - 1].dispIndex) + 1,
      tableData: getDataSource2(),
      type: '类属性',
    });
  };

  // 类属性修改
  const handleClassEdit = (record: Recordable) => {
    openModalClassPropertyModal(true, {
      isUpdate: true,
      record: record,
      docTypeId: 'PartRevision',
      tableData: getDataSource2(),
      type: '类属性',
    });
  };

  // 类属性删除
  const handleClassDelete = (record: Recordable) => {
    deletePartFeatureList('PartRevision', record.prop, record.dispIndex).then((res) => {
      if (res) {
        createMessage.success(t('common.delSuccessText'));
        reload2();
      }
    });
  };

  // 分类属性
  const handleCategoryProp = (record: Recordable) => {
    openModalPartCategoryPropModal(true, record);
  };

  // 绑定类型
  const handlebindType = (record: Recordable) => {
    openModalBindTypeModal(true, record);
  };
  // 初始化表格
  const [registerTable, { getDataSource: getDataSource1, reload: reload1 }] = useTable({
    titleHelpMessage: 'partSetType',
    api: getAllPartClass,
    columns: getPartSettingColumns(),
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
    actionColumn: {
      width: 80,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 初始化设置配置参数表单
  const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
    schemas: getSetConfig(),
    showActionButtonGroup: false,
  });

  // 初始化类属性表格
  const [registerTable2, { getDataSource: getDataSource2, reload: reload2 }] = useTable({
    titleHelpMessage: 'partSetClass',
    api: getPartFeatureList,
    columns: getClassColumns(),
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
    actionColumn: {
      width: 80,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 类属性弹窗
  const [registerClassPropertyModal, { openModal: openModalClassPropertyModal }] = useModal();

  // 零件分类弹窗
  const [registerPartCategoryModal, { openModal: openModalPartCategoryModal }] = useModal();

  // 零件分类属性弹窗
  const [registerPartCategoryPropModal, { openModal: openModalPartCategoryPropModal }] = useModal();

  // 绑定类型弹窗
  const [registerBindTypeModal, { openModal: openModalBindTypeModal }] = useModal();
</script>
